<template>
	<view class="page-container back-grey-light">
		<!-- tabs标签区域 -->
		<view :style="{position: 'sticky', top: 0, left: 0, zIndex: 99}">
			<u-tabs :list="tabList" :is-scroll="false" :current="type" @change="change"
				font-size="30" :bold="false" :bar-width="40" :bar-height="8" inactive-color="#999999" :active-color="primaryColor">
			</u-tabs>
		</view>
		
		<!-- 全部列表 -->
		<view v-show="type==0 && list0.length" class="pall-base">
			<view v-for="(item, index) in list0" :key="index" class="mb-l">
				<my-postcard :post="item" @clickPraise="mypostPraiseHandle" :index="index"
					:canRemove="manageStatus" :removeList="removeList" @clickCheck="checkRemove">
				</my-postcard>
			</view>
			<u-loadmore :status="loadStatus0" />
		</view>
		
		<!-- 审核中列表 -->
		<view v-show="type==1 && list1.length" class="pall-base">
			<view v-for="(item, index) in list1" :key="index" class="mb-l">
				<my-postcard :post="item" @clickPraise="mypostPraiseHandle" :index="index"
					:canRemove="manageStatus" :removeList="removeList" @clickCheck="checkRemove">
				</my-postcard>
			</view>
			<u-loadmore :status="loadStatus1" />
		</view>
		
		<!-- 审核通过列表 -->
		<view v-show="type==2 && list2.length" class="pall-base">
			<view v-for="(item, index) in list2" :key="index" class="mb-l">
				<my-postcard :post="item" @clickPraise="mypostPraiseHandle" :index="index"
					:canRemove="manageStatus" :removeList="removeList" @clickCheck="checkRemove">
				</my-postcard>
			</view>
			<u-loadmore :status="loadStatus2" />
		</view>
		
		<!-- 审核拒绝列表 -->
		<view v-show="type==3 && list3.length" class="pall-base">
			<view v-for="(item, index) in list3" :key="index" class="mb-l">
				<my-postcard :post="item" @clickPraise="mypostPraiseHandle" :index="index"
					:canRemove="manageStatus" :removeList="removeList" @clickCheck="checkRemove">
				</my-postcard>
			</view>
			<u-loadmore :status="loadStatus3" />
		</view>
		
		<view v-if="showNodata" class="col-box center pcol-lg">
			<image src="/static/icon/nodata.png" style="width: 400rpx;height: 400rpx;"></image>
			<text class="s24 grey-light">还没有发布的帖子~</text>
		</view>
		
		<!-- 右下悬浮管理帖子按钮 -->
		<view v-if="!manageStatus" class="radius-circle back-white manage-button" @click="manageStatus=true">
			<image class="icon" src="../static/编辑.png"></image>
		</view>
		<!-- 底部管理帖子按钮 -->
		<view v-else class="row-box sb back-white prow-lg pcol-base manage-box">
			<view class="back-grey button row-box center" @click="exitEdit()">
				<text class="grey-dark">取消</text>
			</view>
			<view class="back-primary button row-box center" @click="delMyPost()">
				<text class="white">删除</text>
			</view>
		</view>
	</view>
</template>

<script>
	import mixinPost from "@/common/mixin_post.js"
	import { mapState,mapMutations } from "vuex"
	export default {
		mixins: [mixinPost],
		data() {
			return {
				pageType: 1, // 首页-类型为0 我的帖子-类型为1 我的点赞-类型为2
				tabList: [ {name: '全部'}, {name: '审核中'}, {name: '审核通过'}, {name: '审核拒绝'}], // tab列表
				type: 0, // 当前选中
				pageIndex0: 1, // 第几页
				pageCount0: 0, // 页数
				list0: [], // 列表
				pageScroll0: 0, // 页面滚动距离
				loadStatus0: 'loadmore',  // 加载状态
				
				pageIndex1: 1, // 第几页
				pageCount1: 0, // 页数
				list1: [], // 列表
				pageScroll1: 0, // 页面滚动距离
				loadStatus1: 'loadmore',  // 加载状态
				
				pageIndex2: 1, // 第几页
				pageCount2: 0, // 页数
				list2: [], // 列表
				pageScroll2: 0, // 页面滚动距离
				loadStatus2: 'loadmore',  // 加载状态
				
				pageIndex3: 1, // 第几页
				pageCount3: 0, // 页数
				list3: [], // 列表
				pageScroll3: 0, // 页面滚动距离
				loadStatus3: 'loadmore',  // 加载状态
				
				manageStatus: false, // 管理帖子状态
				removeList: [], // 删除列表
			};
		},
		computed: {
			// 是否展示无数据
			showNodata() {
				if (this[`list${this.type}`].length < 1 && this[`loadStatus${this.type}`] == 'nomore') {
					return true
				} else {
					return false
				}
			}
		},
		// 定义局部分享
		// 1.发送给朋友
		onShareAppMessage(res) {
			// console.log(res)
			if (res.from == 'button') {
				let index = Number(res.target.id.split('_')[1])
				let list = this[`list${this.type}`]
				let post = list[index]
				let type = post.video?'video':'image'
				return {
					title: post.description,
					path: `/pages/subPackage/post/post_${type}/post_${type}?id=${post.id}`,
					imageUrl: type=='video'?post.coverImage:this.getArrImage(post)[0],
				}
			} else {
				return {
					title: '校园服务喵小朋',
					path: this.getSharePath(),
					imageUrl: '/static/icon/logo.jpg',
				}
			}
		},
		// 2.分享到朋友圈
		onShareTimeline(res) {
			if (res.from == 'button') {
				let index = Number(res.target.id.split('_')[1])
				let list = this[`list${this.type}`]
				let post = list[index]
				let type = post.video?'video':'image'
				return {
					title: post.description,
					path: `/pages/subPackage/post/post_${type}/post_${type}?id=${post.id}`,
					imageUrl: type=='video'?post.coverImage:this.getArrImage(post)[0],
				}
			} else {
				return {
					title: '校园服务喵小朋',
					path: this.getSharePath(),
					imageUrl: '/static/icon/logo.jpg',
				}
			}
		},
		onLoad() {
			this.getList(0)
		},
		onPageScroll(e) {
			// console.log('滚动',e)
			this[`pageScroll${this.type}`] = e.scrollTop
		},
		methods: {
			...mapMutations('m_user', ['updateBackPraise']),
			
			// 切换tab
			change(index) {
				if (this.type == index || this.manageStatus) return
				
				this.type = index
				if (!this[`list${this.type}`].length) { // 未加载过数据
					return this.getList(0)
				}
				setTimeout(() => {
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this[`pageScroll${this.type}`]
					})
				},0)
			},
			
			// 退出编辑
			exitEdit() {
				this.manageStatus = false
				this.removeList = []
			},
			// 勾选删除
			checkRemove(id) {
				let index = this.removeList.indexOf(id)
				if (index == -1) {
					this.removeList.push(id)
				} else {
					this.removeList.splice(index, 1)
				}
			},
			// 删除选中动态
			delMyPost() {
				if (this.removeList.length < 1) {
					return uni.showToast({
						icon: 'none',
						title: '未勾选要删除的动态！'
					})
				}
				uni.showModal({
					content: '是否确定删除选中动态？',
					confirmColor: this.primaryColor,
					success: (res) => {
						if (res.confirm) {
							this.$api.DelMyPost({
								worldId: this.removeList
							}).then(res => {
								console.log('DelMyPost-success', res)
								if (res.data.code == 200) {
									uni.startPullDownRefresh()
									uni.showToast({
										icon: 'none',
										title: '删除成功！'
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: res.data.msg
									})
								}
							}).catch(err => {
								console.log('DelMyPost-fail', err)
							})
						}
					}
				})
			},
			
			// 点赞-我的动态使用
			mypostPraiseHandle(id) {
				this.$api.PostPraise({
					worldId: id,
				}).then(res => {
					console.log('postPraise-success', res)
					if (res.data.code == 200) {
						let post = this[`list${this.type}`].find( curr => curr.id == id )
						if (post.praiseStatus) {
							post.praiseStatus = 0
							post.praiseCount -= 1
						} else{
							post.praiseStatus = 1
							post.praiseCount += 1
						}
						this.updateBackPraise({
							id: id,
							praiseStatus: post.praiseStatus
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log('postPraise-fail', err)
				})
			}
		},
	}
</script>

<style lang="scss">
	.page-container {
		padding-bottom: 120rpx;
	}
	// 管理帖子按钮
	.manage-button {
		position: fixed;
		right: 32rpx;
		bottom: 48rpx;
		z-index: 99;
		.icon {
			display: block;
			width: 73rpx;
			height: 72rpx;
		}
	}
	.manage-box {
		width: 100vw;
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 99;
		border-top: 2rpx solid #f0f0f0;
		.button {
			width: 320rpx;
			height: 76rpx;
			border-radius: 38rpx;
		}
	}
</style>
